<template>
  <div>
    <h1>Parent</h1>
    <Child :persons="persons">
      <template #laoliu>
        <p>老六</p>
      </template>

      <template #laoba>
        <p>老八</p>
      </template>

      <!-- 作用域插槽名字后的对象里面包含子组件传递过来的数据 -->
      <template #person="{item}">
        <p :style="{background: item.age > 6 ? 'red' : '' }">{{item.name}}-----{{item.age}}</p>
      </template>

      

    </Child>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  components: {
    Child,
  },
  data() {
    return {
      persons: [
        { id: "001", name: "1", age: 30 },
        { id: "002", name: "2", age: 14 },
        { id: "003", name: "3", age: 24 },
        { id: "004", name: "4", age: 55 },
        { id: "005", name: "5", age: 4 },
        { id: "006", name: "6", age: 19 },
      ],
    };
  },
};
</script>

<style></style>
